<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Modern Login</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Font Awesome 图标 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
  <style>
    :root{
      --bg: #0f0c29;
      --glass: rgba(255,255,255,.08);
      --accent: #12c2e9;
      --purple: #c471ed;
      --pink: #f64f59;
    }
    *{box-sizing:border-box;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif}
    body{
      min-height:100vh;
      background: linear-gradient(135deg,var(--bg),#302b63,#24243e);
      display:flex;align-items:center;justify-content:center;
      overflow:hidden;
      position: relative;
    }
    /* 背景悬浮粒子 */
    #particles{position:absolute;width:100%;height:100%;z-index:0}
    .particle{position:absolute;border-radius:50%;background:rgba(255,255,255,.1);animation:float 15s infinite}
    @keyframes float{
      0% { transform: translateY(0) scale(1); opacity: .8; }
      50% { transform: translateY(-50px) scale(1.3); opacity: .3; }
      100% { transform: translateY(0) scale(1); opacity: .8; }
    }

    /* 左侧登录 */
    .login-card{
      width:380px;
      background:var(--glass);
      border:1px solid rgba(255,255,255,.15);
      border-radius:20px;
      padding:40px 50px;
      backdrop-filter:blur(12px);
      z-index:2;
      animation:fadeIn .8s ease;
    }
    @keyframes fadeIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
    .login-card h2{margin-bottom:30px;text-align:center;color:#fff}
    .input-group{position:relative;margin-bottom:25px}
    .input-group input{
      width:100%;padding:12px 40px 12px 15px;border:none;border-radius:10px;
      background:rgba(255,255,255,.07);color:#fff;font-size:1rem;
      transition:background .3s;
    }
    .input-group input:focus{background:rgba(255,255,255,.12);outline:none}
    .input-group i{position:absolute;right:15px;top:50%;transform:translateY(-50%);color:var(--accent)}
    .neon-btn{
      width:100%;padding:12px;border:none;border-radius:10px;
      background:linear-gradient(90deg,var(--accent),var(--purple),var(--pink));
      background-size:200%;color:#fff;font-size:1rem;font-weight:600;
      cursor:pointer;transition:.5s;
    }
    .neon-btn:hover{background-position:right}

    /* 右侧装饰区 */
    .side{
      margin-left:60px;width:320px;z-index:2;
      display:flex;flex-direction:column;gap:25px;
    }
    .shape{
      background:var(--glass);
      border:1px solid rgba(255,255,255,.15);
      border-radius:20px;
      padding:25px;
      backdrop-filter:blur(10px);
      transition:transform .3s;
    }
    .shape:hover{transform:translateY(-5px)}
    .shape h3{display:flex;align-items:center;gap:10px;color:#fff;margin-bottom:10px}
    .shape p{color:rgba(255,255,255,.7);font-size:.95rem;line-height:1.5}

    /* 响应式 */
    @media(max-width:900px){
      body{flex-direction:column;padding:40px 20px}
      .side{margin-left:0;margin-top:40px;width:100%}
    }
  </style>
</head>
<body>
  <!-- 粒子背景 -->
  <div id="particles"></div>

  <!-- 登录卡片 -->
  <div class="login-card">
    <h2>用户登录</h2>
    <form id="loginForm">
      <div class="input-group">
        <input id="user" type="text" placeholder="用户名" required autocomplete="username">
        <i class="fa fa-user"></i>
      </div>
      <div class="input-group">
        <input id="pass" type="password" placeholder="密码" required autocomplete="current-password">
        <i class="fa fa-lock"></i>
      </div>
      <button type="submit" class="neon-btn">登录</button>
    </form>
  </div>

  <!-- 右侧玻璃形状 -->
  <div class="side">
    <div class="shape">
      <h3><i class="fa fa-bolt"></i> 极速响应</h3>
      <p>基于 C++ 高性能网络库，毫秒级处理，轻松支撑万级并发。</p>
    </div>
    <div class="shape">
      <h3><i class="fa fa-shield-alt"></i> 安全可靠</h3>
      <p>全面路由防护、JWT 鉴权、密码加密存储，让数据更安全。</p>
    </div>
    <div class="shape">
      <h3><i class="fa fa-rocket"></i> 易于扩展</h3>
      <p>插件化设计，支持动态加载模块，业务迭代零负担。</p>
    </div>
  </div>

  <script>
    /* ---- 生成随机粒子 ---- */
    const particles = document.getElementById('particles');
    for (let i = 0; i < 60; i++) {
      const p = document.createElement('div');
      p.className = 'particle';
      p.style.left = Math.random() * 100 + '%';
      p.style.width = p.style.height = Math.random() * 6 + 2 + 'px';
      p.style.animationDelay = Math.random() * 15 + 's';
      particles.appendChild(p);
    }

    /* ---- 登录 fetch（同之前逻辑） ---- */
    document.getElementById('loginForm').addEventListener('submit', e => {
      e.preventDefault();
      const u = document.getElementById('user').value.trim();
      const p = document.getElementById('pass').value.trim();
      fetch('/api/login', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({user: u, pass: p})
      })
      .then(r => r.json())
      .then(j => {
        if (j.token) {
          localStorage.setItem('token', j.token);
          localStorage.setItem('user', j.user);
          location.href = '/dashboard';   // 跳到后台主页（可再实现）
        } else {
          alert(j.msg || '登录失败');
        }
      })
      .catch(() => alert('网络错误'));
    });
  </script>
</body>
</html>